<template>
    <div style="width:100%;height:100%">
        <div id="map"></div>
    </div>
</template>

<script>
import $ from 'jquery';
// import data from '../../public/data/path_plan'
export default {
    data () {
        return {
            map:null,
            origin:'116.481028,39.989643',
            destination:'116.434446,39.90816',
            drawResult:null
        }
    },
    mounted(){
        // console.log(data)
        this.init()
    },
    methods: {
        init(){
          this.smartmapx.mapbase="http://www.smartmapx.com";
          this.smartmapx.apikey="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8";
          this.map=new this.smartmapx.Map({
            container: 'map',
            mapId: 'map_id_1',
            center: [116.39738, 39.90579],
            zoom: 10
          })
            var nav = new this.smartmapx.NavigationControl();
            this.map.addControl(nav, 'top-right');

            // 添加比例尺
            this.map.addControl(new this.smartmapx.ScaleControl({
                    maxWidth: 100,
                    unit: 'm'
                }));
            this.mouserUpOriginEnd = this.mouserUpOriginEnd.bind(this);
            this.mouseUpDestinationEnd = this.mouseUpDestinationEnd.bind(this);
            this.map.on('load',()=>{
              var  markerorigin = new this.smartmapx.UnionMarker([116.481028, 39.989643],{
                    icon: require('../../public/img/start.png'),
                    size: [20,29]
               });

               //添加起始图标
               markerorigin.addTo(this.map);
               markerorigin.enableDragging();
               markerorigin.on('dragend',()=>{
                   this.startMovingOrigin();
               })
                // 添加终点图标
                var  markerdestination = new this.smartmapx.UnionMarker([116.434446, 39.90816],{
                    icon: require('../../public/img/stop.png'),
                    size: [20,29]
               });

               //添加起始图标
               markerdestination.addTo(this.map);
               markerdestination.enableDragging();
               markerdestination.on('dragend',()=>{
                  this.startMovingDestinationEnd();
               })
               this.fistIntoMap();
               // 添加图层
               this.map.addSource('drawResult',{
                   data: {
                    type: "FeatureCollection",
                    features: [{
                        type: "Feature",
                        properties: {},
                        geometry: {
                            type: "LineString",
                            coordinates: [[116.47057, 40.01035],[116.43445, 39.90816]]
                          }
                        }]
                       },
                   type: 'geojson'
                })

                this.map.addLayer({
                    "id": "drawResults",
                    "type": "line",
                    "source": "drawResult",
                    "paint": {
                        "line-color": "#3385FF",
                        "line-width": 4,
                        "line-opacity": 1
                    }
                });
                 this.drawResult = {
                        type: "FeatureCollection",
                        features: [
                            {
                                type: "Feature",
                                properties: {},
                                geometry: {
                                    type: "LineString",
                                    coordinates: [[116.47057, 40.01035],[116.43445, 39.90816]]
                                }
                            }
                        ]
                    };
                console.log(this.drawResult)
          })
        },

        startMovingOrigin(){
            this.map.on('mouseup', this.mouserUpOriginEnd);
        },

        startMovingDestinationEnd(){
            this.map.on('mouseup', this.mouseUpDestinationEnd);
        },

        mouserUpOriginEnd(e){
            var originlng = e.lngLat.lng;
            var originlat = e.lngLat.lat;
            this.origin = originlng + ',' + originlat;
            this.map.off('mouseup', this.mouserUpOriginEnd);//关闭监听
            $.get("http://api.smartmapx.com/routing?origin=" + this.origin + "&destination=" + this.destination + "",  (data)=> {
                this.drawResult.features[0].geometry.coordinates = data.route.paths[0].polyline;
                this.map.getSource('drawResult').setData(this.drawResult);
            });
        },

        mouseUpDestinationEnd(e){
            var destinationLng = e.lngLat.lng;
            var destinationLat = e.lngLat.lat;
            this.destination = destinationLng + ',' + destinationLat;
            this.map.off('mouseup', this.mouseUpDestinationEnd);
            $.get("http://api.smartmapx.com/routing?origin=" + this.origin + "&destination=" + this.destination + "",(data)=> {
                this.drawResult.features[0].geometry.coordinates = data.route.paths[0].polyline;
                this.map.getSource('drawResult').setData(this.drawResult);
            });
        },

        fistIntoMap(){
            $.get("http://api.smartmapx.com/routing?origin=116.481028,39.989643&destination=116.434446,39.90816",(data)=>{
                   this.drawResult.features[0].geometry.coordinates=data.route.paths[0].polyline;
                   this.map.getSource('drawResult').setData(this.drawResult)
            })
        }
    }
}
</script>
<style scoped>
#map{
    width:100%;
    height:100%
}
</style>